<template>
	<div class="transfer" :class="[!isPC ? 'transfer-h5' : '', isMobile ? 'transfer-h5-wechat' : '']"
		style="background: #F7F8FA;">

		<div class="header_wrap" :style="`padding-top: ${statusBarHeight}px`">
			<div class="goback" @click="cancel">
				{{ TUITranslateService.t("取消") }}
			</div>
			<text class="header_title"
				:class="{'ru_style': lang === 'ru'}">{{ TUITranslateService.t(transferTitle) }}</text>
			<div class="add_people" @click="submit">
				{{ TUITranslateService.t("component.完成") }}
			</div>
		</div>
		<main class="main">
			<div class="right" v-show="!!transferSelectedList && !!transferSelectedList.length">
				<ul class="transfer-list" v-if="resultShow">
					<p class="transfer-text" v-if="transferSelectedList.length > 0 && isPC">
						{{ TUITranslateService.t("component.已选中") }} {{ transferSelectedList.length}}
						{{ TUITranslateService.t("component.人") }}
					</p>
					<li class="transfer-list-item space-between" v-for="(item, index) in transferSelectedList"
						:key="index">
						<aside class="transfer-list-item-content">
							<template v-if="!isTransferCustomItem">
								<img class="avatar"
									:src="item.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
									onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'" />
								<span v-if="isPC" class="name">{{ item.nick || item.userID }}</span>
							</template>
							<template v-else>
								<slot name="right" :data="item" />
							</template>
						</aside>
						<span @click="selected(item)" v-if="isPC">
							<Icon :file="cancelIcon" :width="'18px'" :height="'18px'"></Icon>
						</span>
					</li>
				</ul>
			</div>
			<div class="left">
				<main class="transfer-left-main">
					<ul class="transfer-list">
						<li class="transfer-list-item" @click="selectedAll" v-if="optional.length > 1 && !isMoreRadio">
							<Icon v-if="transferSelectedList.length === optional.length" :file="selectedIcon"
								:width="'18px'" :height="'18px'"></Icon>
							<i v-else class="icon-unselected"></i>
							<span v-if="lang!='ru'" class="select-all">{{TUITranslateService.t("component.全选")}}</span>
							<span v-if="lang=='ru'" class="select-all">Выбрать все</span>
						</li>
						<li class="transfer-list-item" v-for="(item, index) in transferList" :key="item.userID"
							@click="selected(item)">
							<Icon v-if="transferSelectedList.indexOf(item) > -1" :file="selectedIcon"
								:class="[item.isDisabled && 'disabled']" :width="'18px'" :height="'18px'"></Icon>
							<i v-else :class="[item.isDisabled && 'disabled', 'icon-unselected']"></i>
							<template v-if="!isTransferCustomItem">
								<img class="avatar"
									:src="item.avatar || 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
									onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'" />
								<span class="name">{{ item.nick || item.userID }}</span>
								<span v-if="item.isDisabled">（{{ TUITranslateService.t("component.已在群中") }}）</span>
							</template>
							<template v-else>
								<slot name="left" :data="item" />
							</template>
						</li>
						<li class="transfer-list-item more" @click="getMore" v-if="transferTotal > transferList.length">
							{{ TUITranslateService.t("component.查看更多") }}
						</li>
					</ul>
				</main>
			</div>
		</main>
	</div>
</template>
<script lang="ts" setup>
	import { ref, watchEffect, computed, watch } from "../../../adapter-vue";
	import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
	import { ITransferListItem } from "../../../interface";
	import Icon from "../Icon.vue";
	import selectedIcon from "../../../assets/icon/selected.svg";
	import cancelIcon from "../../../assets/icon/cancel.svg";
	import { isPC, isMobile } from "../../../utils/env";
	import store from '@/store/index.js';
	const lang = getApp().globalData.lang;

	const props = defineProps({
		list: {
			type: Array,
			default: () => [],
		},
		selectedList: {
			type: Array,
			default: () => [],
		},
		isSearch: {
			type: Boolean,
			default: true,
		},
		isRadio: {
			type: Boolean,
			default: false,
		},
		isCustomItem: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: "",
		},
		type: {
			type: String,
			default: "",
		},
		resultShow: {
			type: Boolean,
			default: true,
		},
		total: {
			type: Number,
			default: 0,
		},
		isHiddenBackIcon: {
			type: Boolean,
			default: false,
		}
	});

	const type = ref("");
	const transferList = ref<Array<ITransferListItem>>([]);
	const transferTotal = ref<Number>(0);
	const transferSelectedList = ref<Array<ITransferListItem>>([]);
	const isTransferSearch = ref(true);
	const isTransferCustomItem = ref(false);
	const transferTitle = ref("");
	const searchValue = ref("");

	let systemInfo = uni.getSystemInfoSync();
	let statusBarHeight = systemInfo.statusBarHeight;

	const emit = defineEmits(["search", "cancel", "submit", 'getMore', 'ceshi']);

	// 可选项
	let optional = computed(() =>
		transferList.value.filter((item : any) => !item.isDisabled)
	);
	// let optional = ref<any>([]);

	let isMoreRadio = ref<any>(false);
	// let numRadio = ref<number>(1000);

	watch(
		() => props.isRadio,
		(newVal : any, oldVal : any) => {
			if (newVal !== oldVal) {
				isMoreRadio.value = newVal;
			}
		},
		{
			immediate: true,
			deep: true,
		}
	);

	watchEffect(() => {
		if (props.isCustomItem) {
			for (let index = 0; index < props.list.length; index++) {
				if (
					(props.list[index] as any).conversationID.indexOf("@TIM#SYSTEM") > -1
				) {
					props.list.splice(index, 1);
				}
				transferList.value = props.list as Array<ITransferListItem>;
			}
		} else {
			transferList.value = props.list as Array<ITransferListItem>;
		}
		transferTotal.value = props.total ? props.total : props.list.length;
		transferSelectedList.value = (props.selectedList && props.selectedList.length > 0 ? props.selectedList : transferSelectedList.value) as any;
		isTransferSearch.value = props.isSearch;
		isTransferCustomItem.value = props.isCustomItem;
		transferTitle.value = props.title;
		type.value = props.type;
	});

	const handleInput = (e : any) => {
		searchValue.value = e.target.value;
		emit("search", e.target.value);
	};
	const selected = (item : any) => {
		if (item.isDisabled) {
			return;
		}
		let list : Array<ITransferListItem> = transferSelectedList.value;
		const index : number = list.indexOf(item);
		if (index > -1) {
			return transferSelectedList.value.splice(index, 1);
		}
		if (props.isRadio) {
			list = [];
		}
		list.push(item);
		transferSelectedList.value = list;
	};

	const selectedAll = () => {
		if (transferSelectedList.value.length === optional.value.length) {
			transferSelectedList.value = [];
		} else {
			transferSelectedList.value = [...optional.value];
		}
	};

	const submit = () => {
		emit("submit", transferSelectedList.value);
		// 针对小程序做的数据清空
		searchValue.value = "";
	};

	const cancel = () => {
		store.commit("setIsBack", true);
		emit("cancel");
		// uni.navigateBack({
		// 	delta: 1
		// });
		// 针对小程序做的数据清空
		searchValue.value = "";
	};

	const getMore = () => {
		emit("getMore");
	}
</script>

<style lang="scss" scoped src="./style/transfer.scss">
	// .transfer-h5-wechat{
	// 	height:80vh !important;padding-top: 20vh !important;
	// }
</style>

<style lang="scss" scoped>
	.header_wrap {
		flex: none;
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		line-height: 60rpx;
		color: #1D1D1D;
		font-weight: 500;
		letter-spacing: 3rpx;
		margin-bottom: 30rpx;
		position: relative;
		background-color: #F7F8FA;

		.header_title {
			&.ru_style {
				padding-right: 60rpx;
			}

			font-weight: bold;
		}

		.add_people {
			position: absolute;
			z-index: 2;
			display: inline-flex;
			bottom: 0;
			right: 0;
			font-size: 24rpx;
			line-height: 88rpx;
			padding: 0 30rpx;
			color: #1D1D1D;
		}

		.goback {
			position: absolute;
			z-index: 2;
			display: inline-flex;
			bottom: 0;
			left: 0;
			font-size: 24rpx;
			line-height: 88rpx;
			padding: 0 30rpx;
			color: #999999;
		}
	}

	.transfer-h5 .main {
		border-radius: 48rpx 48rpx 0 0;
		padding-top: 30rpx;
	}
</style>